<template>
	<view v-if="info.courseName" :style="theme" :class="info.signInStatus==0?'contents':''">
		<block v-if="info.signInStatus==0">
			<view style="height: 60rpx;"></view>
			<view class="codecont">
				<view class="f36 c2 fwb">
					{{info.venueName ? info.venueName + ' | ':''}}{{info.courseName}}
				</view>
				<view class="f28 c6 mt20">{{info.day.slice(5, 10) + ' ' + info.days + ' ' + info.time}}</view>
				<view v-if="info.teacher" class="teacher f26 c3 flex mt20">
					<image :src="info.teacherImage? info.teacherImage : imgHost+'/user.png'" mode="widthFix"></image>
					{{info.teacher}}
				</view>
				<view v-if="info.assistantName" class="f28 c6 mt20">助教：{{info.assistantName}}</view>
				<view class="code_box_code">
					<canvas canvas-id="qrcode" style="width: 240px;height: 240px;margin: 0 auto;" />
				</view>
				<view class="f24" style="color: #949BA2;">扫一扫上方二维码签到</view>
			</view>
		</block>
		<block v-else>
			<view style="height: 20rpx;"></view>
			<view class="card">
				<view class="f36 c2 fwb">
					{{info.venueName ? info.venueName + ' | ':''}}{{info.courseName}}
				</view>
				<view class="f28 c6 mt20">{{info.day.slice(5, 10) + ' ' + info.days + ' ' + info.time}}</view>
				<view v-if="info.teacher" class="teacher f26 c3 flex mt20">
					<image :src="info.teacherImage? info.teacherImage : imgHost+'/user.png'" mode="widthFix"></image>
					{{info.teacher}}
				</view>
				<view v-if="info.assistantName" class="f28 c6 mt20">助教：{{info.assistantName}}</view>
			</view>
			<view class="card">
				<view class="f32 fwb" :class="info.signInStatus==1?'ztColor':info.signInStatus==2?'redColor':'c2'">
					{{info.signInStatus==0?'未上课':info.signInStatus==1?'已签到':info.signInStatus==2?'缺课':info.signInStatus==4?'已补课':'待成班'}}
				</view>
				<view class="f28 c9 mt10">签到时间：<text :class="info.signInTime?'c6':''">{{info.signInTime || '-'}}</text>
				</view>
			</view>
			<view v-if="info.comments || (info.studentImg2 && info.studentImg2.length>0)" class="card">
				<view class="f32 fwb c2">
					课堂表现
				</view>
				<view class="f26 c3 mt10">{{info.comments || ''}}</view>
				<view class="imgList">
					<block v-for="(item, index) in info.studentImg2">
						<image v-if="item.type==0" mode="aspectFit" :key="index" :src="item.src"
							@click.stop="previewImg(index,info.studentImg2)"></image>
						<video v-else :src="item.src" autoplay show-progress controls></video>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				info: {},
				id: '',
				timeId: ''
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.timeId = ops.timeId
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.courseTimeDetailMini(),
					data: {
						param: {
							timeId: this.timeId,
							id: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
						if (res.record.signInStatus == 0) {
							this.qrFun(res.record.code)
						}
					}
				}).catch(() => {})
			},
			//单张图片预览
			previewImg(index, imgsArray) {
				let arr = []
				imgsArray.forEach((s)=> {
					if(s.type==0) {
						arr.push(s.src)
					}
				})
				uni.previewImage({
					current: index,
					urls: arr
				});
			},
			qrFun: function(text) {
				this.qrShow = true
				uni.showLoading({
					title: '加载中...'
				})
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 220,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.contents {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: $color;
	}

	.codecont {
		padding: 80rpx 0;
		margin: 0 auto;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.5;

		.code_box_code {
			display: flex;
			justify-content: center;
			margin: 60rpx auto;
		}

	}

	.teacher {
		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}

	.card {
		padding: 30rpx;
		margin: 0 auto 20rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		line-height: 1.5;

		.imgList {
			padding-top: 6rpx;

			image,
			video {
				width: 144rpx;
				height: 144rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;
				margin-right: 18rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
</style>